{% extends "base.html" %}
{% block title %}Hive数据报表{% endblock %}
{% block head %}
    <script src="static/plugins/My97DatePicker/WdatePicker.js"></script>
    <script src="static/plugins/echarts.min.js"></script>
    <script src="static/plugins/walden.js"></script>
    <script src="static/js/jquery.ba-resize.js"></script>
    <script src="static/plugins/bootstrap-slider/bootstrap-slider.js"></script>
    <link rel="stylesheet" href="static/plugins/bootstrap-slider/slider.css">
    <style>
        input {
            width: 100px;
        }
    </style>
{% endblock %}
{% block contentheader %}Hive中库表数据报表{% endblock %}
{% block contentsmallheader %}在多个维度上对Hive中库表数据变化进行监控查询{% endblock %}
{% block content %}
    <div class="row">
        <div class="col-md-12">
            <div class="box box-primary">
                <div class="box-header with-border">
                    <h3 class="box-title">库/表基于维度（年、季度、月、周、日）总量占比</h3>
                    <div class="box-tools pull-right">
                        <button type="button" class="btn btn-box-tool" data-widget="collapse"><i
                                class="fa fa-minus"></i>
                        </button>
                    </div>
                </div>
                <div class="box-body" id="pie_type">
                    <div class="col-md-3">
                        <table style="width: 400px;height: 150px;">
                            <tr>
                                <td style="width: 16%">库/表类型：</td>
                                <td style="width: 30%">
                                    <div class="btn-group">
                                        <button type="button" class="btn btn-default dropdown-toggle"
                                                data-toggle="dropdown" style="width: 100px">
                                            -请选择-
                                            <span class="caret"></span>
                                        </button>
                                        <ul class="dropdown-menu" role="menu" id="database_type"
                                            style="max-width:100px;min-width:100px">
                                            <li data-target="all"><a href="#">all</a></li>
                                        </ul>
                                    </div>
                                </td>
                            </tr>
                            <tr>
                                <td>时间点类型：</td>
                                <td>
                                    <div class="btn-group">
                                        <button type="button" class="btn btn-default dropdown-toggle"
                                                data-toggle="dropdown" style="width: 100px" disabled>
                                            -请选择-
                                            <span class="caret"></span>
                                        </button>
                                        <ul class="dropdown-menu" role="menu" id="date_type"
                                            style="max-width:100px;min-width:100px">
                                            <li data-target="year"><a href="#">年</a></li>
                                            <li data-target="season"><a href="#">季度</a></li>
                                            <li data-target="month"><a href="#">月</a></li>
                                            <li data-target="week"><a href="#">周</a></li>
                                            <li data-target="day"><a href="#">日</a></li>
                                        </ul>
                                    </div>
                                </td>
                            </tr>
                            <tr>
                                <td>选择时间点：</td>
                                <td>
                                    <input id="day" type="text"
                                           onfocus="WdatePicker({onpicked:date_changed,minDate:'2016-03-21',maxDate:'%y-%M-%d'})"
                                           style="display: none" readOnly="true"
                                           class="WdateDiv"/>
                                    <input type="text" id="month" readOnly="true"
                                           onfocus="WdatePicker({dateFmt:'yyyy年MM月',minDate:'2016-03',maxDate:'%y-%M',onpicked:date_changed})"
                                           style="display: none" class="WdateDiv"/>
                                    <input type="text" id="year" readOnly="true"
                                           onfocus="WdatePicker({dateFmt:'yyyy年',minDate:'2016',maxDate:'%y',onpicked:date_changed})"
                                           style="display: none" class="WdateDiv"/>
                                    <input type="text" id="season" readOnly="true"
                                           onfocus="WdatePicker({dateFmt:'yyyy年M月',minDate:'2016-03',maxDate:'%y-%M',onpicked:get_season,errDealMode:3})"
                                           style="display: none" placeholder="选择月份得到季度" class="WdateDiv"/>
                                    <input type="text" id="week" readOnly="true"
                                           onfocus="WdatePicker({isShowWeek:true,onpicked:function() {
                                             $dp.$('week').value = $dp.cal.getP('y') + '年' + $dp.cal.getP('W', 'WW')+'周';date_pick= $dp.$('week').value;
                                             $('#generate_cmp').removeAttr('disabled');
                                           },errDealMode:3,minDate:'2016-03-21',maxDate:'%y-%M-%d'})"
                                           style="display: none" placeholder="选择日期得到周" class="WdateDiv"/>
                                </td>
                            </tr>
                            <tr>
                                <td colspan="2" align="center" valign="center">
                                    <button class="btn btn-primary" id="generate_cmp" disabled>生成占比图</button>
                                </td>
                            </tr>
                        </table>
                        <hr/>
                        <input id="ex1" data-slider-id='ex1Slider' type="text" data-slider-min="200"
                               data-slider-max="500" data-slider-step="10" data-slider-value="200"/>
                    </div>
                    <div class="col-md-9">
                        <div id="pie"></div>
                    </div>

                </div>
                <!-- /.box-body -->
            </div>
        </div>
    </div>
    <div class="row">
        <div class="col-md-12">
            <div class="box box-primary">
                <div class="box-header with-border">
                    <h3 class="box-title">库/表基于维度（年，季度，月，周）总量及增量走势</h3>
                    <div class="box-tools pull-right">
                        <button type="button" class="btn btn-box-tool" data-widget="collapse"><i
                                class="fa fa-minus"></i>
                        </button>
                    </div>
                </div>
                <div class="box-body" id="bar_type">
                    <div class="col-md-3">
                        <table style=" width: 400px;height: 200px;">
                            <tr>
                                <td style="width: 20%">库/表类型：</td>
                                <td style="width: 10%">
                                    <div class="btn-group">
                                        <button type="button" class="btn btn-default dropdown-toggle"
                                                data-toggle="dropdown" style="width: 100px">
                                            -请选择-
                                            <span class="caret"></span>
                                        </button>
                                        <ul class="dropdown-menu" role="menu" id="database_table_type"
                                            style="max-width:100px;min-width:100px">
                                            <li data-target="all"><a href="#">all</a></li>
                                        </ul>
                                    </div>
                                </td>
                                <td style="width: 1%">
                                    <div class="btn-group">
                                        <button type="button" class="btn btn-default dropdown-toggle"
                                                style="max-width:200px;min-width:200px"
                                                data-toggle="dropdown" disabled>
                                            -请选择-
                                            <span class="caret"></span>
                                        </button>
                                        <ul class="dropdown-menu" role="menu" id="select_database_table"
                                            style="max-width:200px;min-width:200px">
                                        </ul>
                                    </div>
                                </td>
                            </tr>
                            <tr>
                                <td>时间段类型：</td>
                                <td>
                                    <div class="btn-group">
                                        <button type="button" class="btn btn-default dropdown-toggle"
                                                data-toggle="dropdown" style="width: 100px" disabled>
                                            -请选择-
                                            <span class="caret"></span>
                                        </button>
                                        <ul class="dropdown-menu" role="menu" id="period_type"
                                            style="max-width:100px;min-width:100px">
                                            <li data-target="year"><a href="#">年</a></li>
                                            <li data-target="season"><a href="#">季度</a></li>
                                            <li data-target="month"><a href="#">月</a></li>
                                            <li data-target="week"><a href="#">周</a></li>
                                            <li data-target="day"><a href="#">日</a></li>
                                        </ul>
                                    </div>
                                </td>
                                <td>

                                </td>
                            </tr>
                            <tr>
                                <td>选择时间段：</td>
                                <td>
                                    <input id="start_day" type="text" readOnly="true"
                                           onfocus="WdatePicker({onpicked:start_date_changed,minDate:'2016-03-21',maxDate:'%y-%M-%d'})"
                                           style="display: none" placeholder="选择起始日期"
                                           class="WdateDiv"/>
                                    <input type="text" id="start_month" readOnly="true"
                                           onfocus="WdatePicker({dateFmt:'yyyy年MM月',minDate:'2016-03',maxDate:'%y-%M',onpicked:start_date_changed})"
                                           style="display: none" class="WdateDiv" placeholder="选择起始年月"/>
                                    <input type="text" id="start_year" readOnly="true"
                                           onfocus="WdatePicker({dateFmt:'yyyy年',minDate:'2016',maxDate:'%y',onpicked:start_date_changed})"
                                           style="display: none" class="WdateDiv" placeholder="选择起始年份"/>
                                    <input type="text" id="start_season" readOnly="true"
                                           onfocus="WdatePicker({dateFmt:'yyyy年M月',minDate:'2016-03',maxDate:'%y-%M',onpicked:get_start_season,errDealMode:3})"
                                           style="display: none" placeholder="选择月份得到起始季度" class="WdateDiv"/>
                                    <input type="text" id="start_week" readOnly="true"
                                           onfocus="WdatePicker({isShowWeek:true,onpicked:function() {
                                             $dp.$('start_week').value = $dp.cal.getP('y') + '年' + $dp.cal.getP('W', 'WW')+'周';start_date_pick= $dp.$('start_week').value;
                                           },errDealMode:3,minDate:'2016-03-21',maxDate:'%y-%M-%d'})"
                                           style="display: none" placeholder="选择日期得到起始周" class="WdateDiv"/>
                                </td>
                                <td>
                                    <input id="end_day" type="text"
                                           onfocus="WdatePicker({onpicked:end_date_changed,minDate:'2016-03-21',maxDate:'%y-%M-%d'})"
                                           style="display: none" placeholder="选择结束日期" readOnly="true"
                                           class="WdateDiv"/>
                                    <input type="text" id="end_month" placeholder="选择结束年月" readOnly="true"
                                           onfocus="WdatePicker({dateFmt:'yyyy年MM月',minDate:'2016-03',maxDate:'%y-%M',onpicked:end_date_changed})"
                                           style="display: none" class="WdateDiv"/>
                                    <input type="text" id="end_year" placeholder="选择结束年份" readOnly="true"
                                           onfocus="WdatePicker({dateFmt:'yyyy年',minDate:'2016',maxDate:'%y',onpicked:end_date_changed})"
                                           style="display: none" class="WdateDiv"/>
                                    <input type="text" id="end_season" readOnly="true"
                                           onfocus="WdatePicker({dateFmt:'yyyy年M月',minDate:'2016-03',maxDate:'%y-%M',onpicked:get_end_season,errDealMode:3})"
                                           style="display: none" placeholder="选择月份得到结束季度" class="WdateDiv"/>
                                    <input type="text" id="end_week" readOnly="true"
                                           onfocus="WdatePicker({isShowWeek:true,onpicked:function() {
                                             $dp.$('end_week').value = $dp.cal.getP('y') + '年' + $dp.cal.getP('W', 'WW')+'周';end_date_pick= $dp.$('end_week').value;
                                             $('#generate_cmp1').removeAttr('disabled');
                                           },errDealMode:3,minDate:'2016-03-21',maxDate:'%y-%M-%d'})"
                                           style="display: none" placeholder="选择日期得到结束周" class="WdateDiv"/>
                                </td>
                            </tr>
                            <tr>
                                <td colspan="3" valign="center" align="center">
                                    <button class="btn btn-primary" id="generate_cmp1" disabled>生成柱状图</button>
                                </td>
                            </tr>
                        </table>
                        <hr/>
                        <input id="ex2" data-slider-id='ex2Slider' type="text" data-slider-min="200"
                               data-slider-max="500" data-slider-step="10" data-slider-value="200"/>
                    </div>
                    <div class="col-md-9">
                        <div id="bar" style="height:300px"></div>
                    </div>
                </div>
                <!-- /.box-body -->
            </div>
        </div>
    </div>

{% endblock %}
{% block script %}
    <script>
        function add_class() {
            $('#treeview5').addClass('active');
            $('#menu5').addClass('menu-open');
            $('#reportods').addClass('active');
        }
        $('#ex1').slider({
            formatter: function (value) {
                $('#pie').css('height', value);
                return value;
            }
        });
        $('#ex2').slider({
            formatter: function (value) {
                $('#bar').css('height', value);
                return value;
            }
        });
        var date_pick;
        var start_date_pick;
        var end_date_pick;
        function date_changed() {
            $('#generate_cmp').removeAttr("disabled");
            date_pick = this.value;
        }
        function start_date_changed() {
            start_date_pick = this.value;
        }
        function end_date_changed() {
            $('#generate_cmp1').removeAttr("disabled");
            end_date_pick = this.value;
        }
        $('#generate_cmp').on('click', function () {
            var database_type = $('#database_type').prev().attr('data-target');
            var date_type = $('#date_type').prev().attr('data-target');
            if (date_pick == "")
                return;
            var date_txt = date_pick;
            var mypie = echarts.init(document.getElementById('pie'), 'walden');
            mypie.showLoading();
            $.ajax({
                url: '/get_report_pie_data',
                data: {database_type: database_type, date_type: date_type, date_txt: date_txt},
                success: function (data) {
                    mypie.setOption(data.data);
                    $(function () {
                        $('#pie').parent().resize(function () {
                            mypie.resize();
                        });
                    });
                    mypie.hideLoading();
                }
            });
        });
        function select_season(month) {
            var season;
            if (['01', '02', '03'].indexOf(month) > -1) {
                season = '1季度';
                return season;
            } else if (['04', '05', '06'].indexOf(month) > -1) {
                season = '2季度';
                return season;
            }
            else if (['07', '08', '09'].indexOf(month) > -1) {
                season = '3季度';
                return season;
            }
            else if (['10', '11', '12'].indexOf(month) > -1) {
                season = '4季度';
                return season;
            }

        }
        function get_season() {
            var month = $dp.$('season').value = $dp.cal.getP('M');
            var season = select_season(month);

            $dp.$('season').value = $dp.cal.getP('y') + '年' + season;
            date_pick = $dp.$('season').value;
        }
        function get_start_season() {
            var month = $dp.$('start_season').value = $dp.cal.getP('M');
            var season = select_season(month);

            $dp.$('start_season').value = $dp.cal.getP('y') + '年' + season;
            start_date_pick = $dp.$('start_season').value;
        }
        function get_end_season() {
            var month = $dp.$('end_season').value = $dp.cal.getP('M');
            var season = select_season(month);

            $dp.$('end_season').value = $dp.cal.getP('y') + '年' + season;
            end_date_pick = $dp.$('end_season').value;
            $('#generate_cmp1').removeAttr("disabled");
        }
        $.ajax({
            url: '/get_report_dbs', success: function (data) {
                for (var i = 0; i < data.data.length; i++) {
                    $('#database_type').append('<li data-target="' + data.data[i][0] + '"><a href="#">' + data.data[i][0] + '</a></li>');
                    $('#database_table_type').append('<li data-target="' + data.data[i][0] + '"><a href="#">' + data.data[i][0] + '</a></li>');

                }
            }
        });

        $('#database_type').on('click', 'li', function () {

            $('#database_type').prev().text($(this).text());
            $('#database_type').prev().append('<span class="caret"></span>');
            $('#database_type').prev().attr('data-target', $(this).attr('data-target'));
            $('#date_type').prev().removeAttr('disabled');
        });
        $('#date_type').on('click', 'li', function () {
            $('#date_type').prev().text($(this).text());
            $('#date_type').prev().append('<span class="caret"></span>');
            $('#date_type').prev().attr('data-target', $(this).attr('data-target'));
            $('#pie_type .WdateDiv').hide();
            $('#pie_type .WdateDiv').val("");
            date_pick = "";
            $('#' + $(this).attr('data-target')).show();
        });
        $('#database_table_type').on('click', 'li', function () {
            var url;
            $('#select_database_table').empty();
            $('#database_table_type').prev().text($(this).text());
            $('#database_table_type').prev().attr('data-target', $(this).attr('data-target'));
            $('#database_table_type').prev().append('<span class="caret"></span>');
            $('#select_database_table').append('<li data-target="all"><a href="#">all</a></li>');
            if ($(this).attr('data-target') != 'all')
                $.ajax({
                    data: {database: $(this).attr('data-target')},
                    url: '/get_report_tables', success: function (data) {
                        for (var i = 0; i < data.data.length; i++)
                            $('#select_database_table').append('<li data-target="' + data.data[i][0] + '"><a href="#">' + data.data[i][0] + '</a></li>');
                    }
                });
            $('#select_database_table').prev().text('-请选择-');
            $('#select_database_table').prev().append('<span class="caret"></span>');
            $('#select_database_table').prev().attr('data-target', '');
            $('#select_database_table').prev().removeAttr("disabled")
        });
        $('#select_database_table').on('click', 'li', function () {
            $('#select_database_table').prev().text($(this).attr('data-target'));
            $('#select_database_table').prev().append('<span class="caret"></span>');
            $('#select_database_table').prev().attr('data-target', $(this).attr('data-target'));
            $('#period_type').prev().removeAttr('disabled');
        });
        $('#period_type').on('click', 'li', function () {
            $('#period_type').prev().text($(this).text());
            $('#period_type').prev().append('<span class="caret"></span>');
            $('#period_type').prev().attr('data-target', $(this).attr('data-target'));
            $('#bar_type .WdateDiv').hide();
            $('#bar_type .WdateDiv').val('');
            start_date_pick = "";
            end_date_pick = "";
            $('#start_' + $(this).attr('data-target')).show();
            $('#end_' + $(this).attr('data-target')).show();
        });
        $('#generate_cmp1').on('click', function () {
            if (start_date_pick == '' || end_date_pick == '' || start_date_pick > end_date_pick)
                return;
            var database_table_type = $('#database_table_type').prev().attr('data-target');
            var database_table = $('#select_database_table').prev().attr('data-target');
            var period_type = $('#period_type').prev().attr('data-target');
            var mybar = echarts.init(document.getElementById('bar'));
            mybar.showLoading();
            $.ajax({
                url: '/get_report_bar_data',
                data: {
                    database_table_type: database_table_type,
                    database_table: database_table,
                    period_type: period_type,
                    start_date_pick: start_date_pick,
                    end_date_pick: end_date_pick
                },
                success: function (data) {

                    option = {
                        title: {
                            left: 'center',
                            text: data.title
                        },
                        tooltip: {
                            trigger: 'axis',
                            axisPointer: {            // 坐标轴指示器，坐标轴触发有效
                                type: 'shadow'        // 默认为直线，可选为：'line' | 'shadow'
                            },
                            formatter: function (params, ticket, callback) {
                                var tip = params[0]['name'] + ':' + '<br/>';
                                tip = tip + "增量:" + params[0]['value'] + '<br/>';
                                tip = tip + "总量:" + params[1]['value'] + '<br/>';
                                tip = tip + "上期总量:" + (params[1]['value'] - params[0]['value']);
                                return tip;
                            }
                        },
                        legend: {
                            orient: 'vertical',
                            left: 'left',
                            data: data.names
                        },
                        grid: {
                            left: '0%',
                            right: '5%',
                            bottom: '0%',
                            containLabel: true
                        },
                        xAxis: [
                            {
                                type: 'category',
                                data: data.labels,
                                name: data.source
                            }
                        ],
                        yAxis: [
                            {
                                type: 'value'
                            }
                        ],
                        series: data.data
                    };
                    mybar.setOption(option);
                    $(function () {
                        $('#bar').parent().resize(function () {
                            mybar.resize();
                        });
                    });
                    mybar.hideLoading();
                }
            });
        });

    </script>
{% endblock %}